<template>
<div>
  <img src="http://w3.dfqy.com/Uploads/Picture/2017-06-02/5930d0874349e.png" alt="">
  <p style="padding: 20px;color: #999">我们拥有完善的信息保密系统， 您的个人信息仅用于方便你的预约，请放心填写。</p>
  <van-form @submit="onSubmit">
    <van-field
        readonly
        clickable
        name="picker"
        :value="type"
        label="服务类型"
        placeholder="请选择服务类型"
        @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns"
          value-key="dictLabel"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      />
    </van-popup>
    <van-field
        v-model="from.nickName"
        type="text"
        label="您的昵称"
        placeholder="请输入您的昵称"
        :rules="[{ required: true, message: '请输入您的昵称' }]"
    />
    <van-field
        v-model="from.telephone"
        type="text"
        label="手机号码"
        placeholder="请输入您的号码"
        :rules="[{ required: true, message: '请输入您的号码' }]"
    />
    <van-field
        v-model="from.remarks"
        type="textarea"
        label="备注"
        placeholder="请输入备注"
    />
    <div style="margin: 16px;">
      <van-button  block type="info" native-type="submit">确认提交</van-button>
    </div>
  </van-form>
  <p style="padding: 20px;color: #999;font-size: 14px">
    1.请填写预约信息。<br />
    2.请确保所填写资料真实准确，便于我们及时与您取得联系，为您安排时间进行评估
  </p>
</div>
</template>

<script>
import {getZz} from "@/api/zz";
import {addY} from "@/api/yuyue";

export default {
  name: "yuyue",
  data() {
    return {
      from:{
        nickName:"",
        telephone:"",
        remarks:"",
        serviceType:4
      },
      type:"",
      columns: [],
      showPicker: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      getZz({
        current:1,
        size:10000
      }).then(res=>{
        this.columns = res.records
        console.log(res.records)
      })
    },
    onSubmit(){
      console.log(this.from)
      addY(this.from).then(res=>{
        console.log(res)
        this.$router.push(`/kaoshi?id=${res.id}&userId=${res.userId}&appointmentId=${res.appointmentId}`)
      })
    },
    onConfirm(e){
      console.log(e)
      this.type = e.dictLabel
      // this.from.serviceType = e.dictCode
      this.showPicker = false
    }
  }
}
</script>

<style scoped>
img{
  width: 100%;
}
</style>
